<sb-layout-auth>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5">
                <div class="card shadow-lg border-0 rounded-lg mt-5">
                    <div class="card-header">
                        <h3 class="text-center font-weight-light my-4">Login</h3>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="form-group">
                                <label class="small mb-1" for="inputUser">Username</label>
                                <input class="form-control py-4"
                                       id="inputUser"
                                       placeholder="Enter username"
                                       [(ngModel)]="username"
                                       [ngModelOptions]="{standalone: true}"
                                />
                            </div>
                            <div class="form-group">
                                <label class="small mb-1" for="inputPassword">Password</label>
                                <input class="form-control py-4"
                                       id="inputPassword"
                                       type="password"
                                       placeholder="Enter password"
                                       [(ngModel)]="password"
                                       [ngModelOptions]="{standalone: true}"
                                />
                            </div>
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input class="custom-control-input"
                                           id="rememberPasswordCheck"
                                           type="checkbox"
                                           [(ngModel)]="remember"
                                           [ngModelOptions]="{standalone: true}"
                                    />
                                    <label class="custom-control-label" for="rememberPasswordCheck">
                                        Remember password
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" *ngIf="failure">
                                <ngb-alert [dismissible]="false" [type]="'danger'">
                                    <strong>Error!</strong> {{ failure }}
                                </ngb-alert>
                            </div>
                            <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
                                <!-- <a class="small" routerLink="/auth/forgot-password">Forgot Password?</a> -->
                                <button class="btn btn-primary"
                                        (click)="login()"
                                        [disabled]="!username || !password"
                                >
                                    Login
                                </button>
                            </div>
                        </form>
                    </div>
                    <!-- <div class="card-footer text-center">
                        <div class="small"><a routerLink="/auth/register">Need an account? Sign up!</a></div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</sb-layout-auth>